<!DOCTYPE html> 
<html> 
	<head> 
	<title>Hemstyrning</title> 
	
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
    	<meta charset="utf-8" />
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 
<body> 

<!-- Start of first page -->
<div data-role="page" id="hem">

	<div data-role="header" data-position="inline"> 
		<h1>Hemstryning 3000</h1>		
		<a href="index.html" data-icon="home" class="ui-btn-left">Hem</a>
		<span class="ui-title" />
	</div><!-- /header -->

	<div data-role="content">	
		<h2>Sensorer</h2>
		<p>Sensor 1 är: </p>
		<p>Sensor 2 är: </p>
		<p>Sensor 3 är: </p>
		<p>Sensor 4 är: </p>
		<div data-role="fieldcontain">
            <!-- Lampa 1 -->
			<label for="slider1">Lampa 1</label>
			<select name="slider2" id="slider2" data-role="slider">
			<option value="off">Av</option>
			<option value="on">På</option>
			</select>
			<br/>
			<!-- Lampa 2 -->
			<label for="slider2">Lampa 2</label>
			<select name="slider2" id="slider2" data-role="slider">
			<option value="off">Av</option>
			<option value="on">På</option>
			</select> 
		</div>		
		<p><a href="#kontakt" data-transition="slide">Temperaturer</a></p>	
	</div><!-- /content -->

</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="kontakt" data-theme="b">
	<div data-role="navbar">
		<ul>
			<li><a href="#">Ett</a></li>
			<li><a href="#">Två</a></li>
			<li><a href="#">Tre</a></li>
		</ul>
	</div><!-- /navbar -->

	<div data-role="header">
		<h1>Hemstyrning - Temperatur</h1>
		<span class="ui-title"/>
	</div><!-- /header -->

	<div data-role="content">	
	    <h2>Temperatur</h2>
		<p>Kommer snart!</p>		
		<p><a href="#hem" data-transition="slide" data-direction="reverse">Tillbaka</a></p>	
	</div><!-- /content -->

</div><!-- /page -->

<!-- Start of third page -->
<div data-role="page" id="test">

	<div data-role="header">
		<h1>TEST</h1>
		<span class="ui-title"/>
	</div><!-- /header -->

	<div data-role="content">	
	    <h2>Test</h2>
		<p>Test Test Test</p>
		<p>Det här är en lång rad utan radbrytningar i HTML-koden. Allt det här står alltså på en rad. Nu är raden slut.</p>
		<p>Här är en ny rad
		med radbrytning.</p>		
		<p><a href="#hem" data-transition="slide" data-direction="reverse">Tillbaka</a></p>	
	</div><!-- /content -->

</div><!-- /page -->
</body>


